import React, { Component } from 'react'
import { connect } from 'react-redux'
import { WhiteSpace, List, WingBlank, SearchBar, Button, Icon } from 'antd-mobile'
import TitleNavBar from '@/common/components/displays/TitleNavBar'
import { mapStateToProps, mapDispatchToProps } from '@/common/actions/actionCreators'
import ActivityIndicator from '@/common/components/displays/ActivityIndicator'

import '@/common/style/ui.less'
import '@/common/style/talantCom.less'

const Item = List.Item;
const Brief = Item.Brief;
class Talant extends Component {
    constructor(props) {
        super(props)
        this.state = {
            titleData: {
                title: "Back",
                content: "talantCom",
                rightTitle: <i style={{
                    width: '25px',
                    height: "25px",
                    display: "inline-block",
                    background: `url(${require('../../images/rightDrawer.png')})`,
                    backgroundSize: "100% 100%"
                }}></i>
            }
        }
    }
    componentWillMount() {
        debugger;
        this.props.getTalent(this.props.talentState.listParams);
    }
    linkHandle(userId) {
        this.props.history.push(`/talant/info/${userId}`);
    }
    formatTime(timestamp) {
        var date = new Date(timestamp);
        var Y = date.getFullYear() + '-';
        var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
        var D = date.getDate() + ' ';
        var h = date.getHours() + ':';
        var m = date.getMinutes() + ':';
        var s = date.getSeconds();
        return Y + M + D;
    }
    talantConsearchhandle(val) {
        Object.assign(this.props.talentState.listParams, {
            queryValue: val
        })
        this.props.getTalent(this.props.talentState.listParams);
    }
    render() {
        return (
            <div id="talantCommy-list">
                <TitleNavBar titleData={this.state.titleData} Drawerstatus={true} talentState={this.props.talentState} />
                <SearchBar placeholder="Search"  onChange={this.talantConsearchhandle.bind(this)} />
                <WhiteSpace />
                <List className="talantCommy-list">
                    {
                        this.props.talentState.talentListArr?this.props.talentState.talentListArr.map((item, index) =>
                            <Item
                                key={index}
                                extra={this.formatTime(item.joinTime)}
                                arrow="horizontal"
                                style={{
                                    zIndex: 888
                                }}
                                thumb={<div>{index + 1}<img src={item.avatar} style={{
                                    display: "inline-block",
                                    marginLeft: '12px',
                                    width: "55px",
                                    height: "55px",
                                    borderRadius: "50%",
                                }} /></div>}
                                multipleLine
                                onClick={() => { this.linkHandle(item.userId) }}
                            >
                                <span style={{
                                    verticalAlign: "middle",
                                    display: "inline-block",
                                    width: "70%",
                                    textOverflow: "ellipsis",
                                    overflow: "hidden",
                                    whiteSpace: "nowrap",
                                    fontSize: " 14px"
                                }}>{item.nickname}--{item.talentLevel}</span><img style={{
                                    display: 'inline-block',
                                    verticalAlign: "middle"
                                }} src={item.talentLevel >= 1 && item.talentLevel <= 6 ?
                                    require('../../images/levelstar.png') :
                                    item.talentLevel >= 7 && item.talentLevel <= 11 ? require("../../images/levelDiamonds.png")
                                        : item.talentLevel >= 12 && item.talentLevel <= 55 ? require("../../images/levelking.png") : ''
                                } />
                                <Brief>{this.formatTime(item.lastBroadcastTime)}</Brief>
                            </Item>
                        ):''
                    }
                </List>
                <WhiteSpace />
            </div>
        )
    }
}
export default connect(mapStateToProps, mapDispatchToProps)(Talant);
